<template>
	<view class="container" style="padding-top: 184rpx">
		<BackGround />

		<view class="searchBox center">
			<image src="@/static/search-icon.png" mode="widthFix" class="searchIcon" v-if="!searchValue"></image>
			<input type="text" confirm-type="搜索" class="flex1" placeholder="搜索订单" placeholder-class="indexSearchBoxPla" v-model="searchValue" @confirm="searchValueChange" />
		</view>

		<view class="nav row-between">
			<view class="nav-item center" :class="{ 'nav-item-sel': currentNav === item.value }" v-for="(item, index) in navList" :key="index" @click="changeNav(item)">
				{{ item.label }}
			</view>
		</view>

		<view class="productList">
			<view class="productItem" v-for="(item, index) in list" :key="index" @click="showDetail(item)">
				<view class="mainImage">
					<image :src="item.imageUrl" mode="widthFix"></image>
				</view>

				<!-- 待付款 -->
				<view class="maskLayer">
					<view class="maskLayer-con">
						<image src="@/static/dzf-bg.png" mode="widthFix" class="maskLayer-con-bg" v-if="item.status == 0"></image>
						<image src="@/static/yfk-bg.png" mode="widthFix" class="maskLayer-con-bg" v-if="item.status == 1"></image>
						<image src="@/static/yqx-bg.png" mode="widthFix" class="maskLayer-con-bg" v-if="item.status == -1"></image>
						<view class="title">{{ item.templateName }}</view>
						<view class="time">订单时间： {{ item.orderDate }}</view>
						<view class="price row">
							<text>{{ item.amount.toFixed(2) }}</text>
							<text>元</text>
						</view>
					</view>
				</view>
				<view class="pay-btn center" v-if="item.status == 0" @click.stop="payOrder(item)">
					<view>立即付款</view>
					<!-- <view>2025年11月23日 23:00:22 前</view> -->
					<image src="@/static/arrow-right.png" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<up-empty mode="list" v-if="!list.length"></up-empty>
		<uni-load-more :status="loadMoreStatus" v-if="list.length"></uni-load-more>

		<OrderDetail ref="orderDetailRef" />

		<Tabbar type="order" />
	</view>
</template>

<script setup>
import { http } from 'uview-plus';
import Tabbar from '@/components/Tabbar.vue';
import OrderDetail from '@/components/OrderDetail.vue';
import { ref, getCurrentInstance } from 'vue';
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';

const { proxy } = getCurrentInstance();

const orderDetailRef = ref(null);

const searchValue = ref('');

const currentNav = ref(1);
const navList = ref([
	{
		label: '已付款',
		value: 1
	},
	{
		label: '待付款',
		value: 0
	},
	{
		label: '已取消',
		value: -1
	}
]);

const list = ref([]);
const total = ref(0);
const pageNum = ref(1);
const loadMoreStatus = ref('more');

async function changeNav(item) {
	currentNav.value = item.value;
	pageNum.value = 1;
	getList();
}

function searchValueChange() {
	pageNum.value = 1;
	getList();
}

function showDetail(row) {
	orderDetailRef.value.init(row.orderSn);
}

onReachBottom(() => {
	if (list.value.length < total.value) {
		pageNum.value++;
		getList();
	}
});

onPullDownRefresh(() => {
	pageNum.value = 1;
	getList();
});

async function getList() {
	loadMoreStatus.value = 'loading';
	const res = await http.post(`/wx/order/pageList?pageNum=${pageNum.value}&pageSize=10`, { status: currentNav.value, name: searchValue.value });
	if (pageNum.value == 1) {
		list.value = res.rows;
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);

		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
	} else {
		list.value = list.value.concat(res.rows);
	}

	loadMoreStatus.value = 'more';
	total.value = res.total;
	if (list.value.length >= total.value) {
		loadMoreStatus.value = 'noMore';
	}
	uni.stopPullDownRefresh();
}

async function payOrder(item) {
	const { data } = await http.post(`/wx/order/payOrder`, { orderSn: item.orderSn });

	uni.requestPayment({
		provider: 'wxpay',
		timeStamp: data.timeStamp,
		nonceStr: data.nonceStr,
		package: data.package,
		signType: data.signType,
		paySign: data.sign,
		success: function (res) {
			console.log('success:' + JSON.stringify(res));
		},
		fail: function (err) {
			console.log('fail:' + JSON.stringify(err));
		}
	});
}

onLoad(async () => {
	uni.hideTabBar();

	getList();
});
</script>

<style lang="scss">
.indexSearchBoxPla {
	font-size: 34rpx;
	color: #aeaeae;
	text-align: center;
}
</style>
<style lang="scss" scoped>
.searchBox {
	width: 656rpx;
	height: 100rpx;
	background: #ffffff;
	border-radius: 60rpx 60rpx 60rpx 60rpx;
	margin: 0 auto;
	position: relative;

	.searchIcon {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		left: 216rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	input {
		text-align: center;
	}
}

.nav {
	margin-top: 30rpx;
	padding: 0 48rpx;

	&-item {
		width: 192rpx;
		height: 88rpx;
		background: #ffffff;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		padding: 0 28rpx;

		font-size: 32rpx;
		color: #000000;
	}

	&-item-sel {
		background: #ffd000;
		font-weight: 500;
	}
}

.productList {
	margin: 30rpx 46rpx 100rpx;

	.productItem {
		width: 656rpx;
		height: 320rpx;
		border-radius: 60rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 40rpx;

		.mainImage {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.maskLayer {
			width: 656rpx;
			height: 320rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;

			.maskLayer-con {
				padding: 56rpx 0 44rpx 44rpx;
				width: 656rpx;
				height: 320rpx;
				position: relative;

				.maskLayer-con-bg {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}

				.title {
					font-weight: bold;
					font-size: 32rpx;
					color: #ffffff;
					position: relative;
					z-index: 10;
				}

				.time {
					font-weight: 500;
					font-size: 20rpx;
					color: #ffffff;
					margin-top: 12rpx;
					position: relative;
					z-index: 10;
				}

				.price {
					margin-top: 62rpx;
					text:first-of-type {
						font-weight: bold;
						font-size: 70rpx;
						color: #ffffff;
						position: relative;
						z-index: 10;
					}
					text:last-of-type {
						font-weight: 500;
						font-size: 20rpx;
						color: #ffffff;
						position: relative;
						z-index: 10;
						top: 10rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		.maskLayerYfk {
		}

		.maskLayerYqx {
		}

		.pay-btn {
			width: 212rpx;
			height: 320rpx;
			background-color: #ffd000;
			border-radius: 60rpx;
			position: absolute;
			z-index: 30;
			right: 0;
			top: 0;
			view:first-of-type {
				font-weight: bold;
				font-size: 34rpx;
				color: #000000;
			}
			// view:nth-child(2) {
			// 	width: 212rpx;
			// 	font-weight: 500;
			// 	font-size: 20rpx;
			// 	color: #030101;
			// 	text-align: center;
			// 	margin-top: 14rpx;
			// }
			image {
				width: 14rpx;
				height: 28rpx;
				margin-left: 10rpx;
			}
		}
	}
}
</style>
